<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="__STATIC__/css/cellar/mui.min.css" rel="stylesheet" />
		<link href="__STATIC__/css/cellar/iconfont.css" rel="stylesheet" />
		<link rel="stylesheet" href="__STATIC__/css/cellar/public_fontsize.css" />
		<style>
			html,body{width:100%;height: 100%;font-family: "微软雅黑";}
			ul, ol, li,p,img{list-style: none outside none;-webkit-margin-before: 0em;-webkit-margin-after: 0em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;-webkit-padding-start: 0px;border: 0;}
			.cls:after{clear: both;content: " ";display: block;height: 0;}
			.clear{clear: both;}
			.hongbao{width: 80%;position: fixed;top:13%;left: 10%;background: #d65047;}
			.hongbao .hb_box{width: 100%;position: relative;}
			.hongbao .hb_box img{width: 100%;}
			.chai{width: 4em;height: 4em;background: #ffd88f;border-radius: 50%;line-height: 4em;position: absolute;top: 41%;left: 40%;}
			.cheac{-webkit-animation: change 1s linear 1;}
			.chai span{text-align: center;display: block;font-size: 2em;}
			.zhongjiang{position: absolute;width: 100%;top: 32%;left: 0;display: none;}
			.zhongjiang p{text-align: center;color: #fff;}
			.zhongjiang p em{color: #ffd88f;font-size: 1.8em;font-style: normal;padding: 0 0.2em;}
			.zhongjiang p:last-child{padding-top: 0.3em;}
			.zhong{position: absolute;width: 100%;top: 32%;left: 0;}
			.zhong p{text-align: center;color: #fff;}
			.zj_info{width: 100%;position: absolute;top: 56%;left: 0;}
			.zj_info a{color: #ececec;}
			.zj_info .zj_top{width: 90%;margin: 0 auto;}
			.zj_info .zj_top a{width: 33.33%;float: left;text-align: center;display: inline-block;}
			.zj_info .zj_m{width: 90%;margin: 0.8em auto 0;height: 5.6em;overflow: hidden;}
			.zj_info .zj_m ul{width: 100%;height: 100%;}
			.zj_info .zj_m ul li{width: 100%;line-height: 1.5em;}
			.zj_info .zj_m ul li a{width: 33.33%;float: left;text-align: center;}
			.gd_a{width:100%;text-align: center;position: absolute;bottom:0.5em;left: 0;}
			.gd_a a{color: #fff;}
			.gd_a a p{color: #fff;padding-top: 0.3em;}
			.closed1{position: absolute;right: 0;top: 0;}
			.closed1 a{color: #fff;}
			@keyframes change{ 0%{-webkit-transform: rotateY(0deg);}
				50%{-webkit-transform: rotateY(180deg);}
				100%{-webkit-transform: rotateY(360deg);}
				}
			@-webkit-keyframes change{ 0%{-webkit-transform: rotateY(0deg);}
				50%{-webkit-transform: rotateY(180deg);}
				100%{-webkit-transform: rotateY(360deg);}
				}
			@-moz-keyframes change{ 0%{-webkit-transform: rotateY(0deg);}
				50%{-webkit-transform: rotateY(180deg);}
				100%{-webkit-transform: rotateY(360deg);}
				}
			@-o-keyframes change{ 0%{-webkit-transform: rotateY(0deg);}
				50%{-webkit-transform: rotateY(180deg);}
				100%{-webkit-transform: rotateY(360deg);}
				}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="hongbao">
				
				<div class="hb_box">
					<div class="closed1"><a href="{:U('User/index')}" class="mui-icon mui-icon-close fs_xxi"></a></div>
					<img src="__STATIC__/images/qianghongbao.png" />
					<div class="chai fs_xl">
						<span>拆</span>
					</div>
					<div class="zhong">
						<p class="jianmianli fs_xi">见面有礼!</p>
					</div>
					<div class="zhongjiang">
						<p class="fs_xl">恭喜获得<em>0.5</em>元</p>
						<p class="fs_xs">已存入余额，可直接提现</p>
					</div>
					<div class="zj_info">
						<!--<div class="zj_top cls">
		    				<a class="fs_m">用户ID</a>
		    				<a class="fs_m">抢得红包</a>
		    				<a class="fs_m">时间</a>
		    			</div>-->
						<div class="zj_m">
							<ul>
							<foreach name="list" item="vo" key="k">
								<li class="cls">
									<a class="fs_xs"><?php echo sprintf("%09d",$vo['user_id']);?></a>
									<a class="fs_xs">已抢得{$vo.money}元</a>
									<a class="fs_xs">{$vo.add_time|date="Y-m-d",###}</a>
								</li>
							</foreach>	
							</ul>
						</div>
					</div>
					<div class="gd_a">
						<a class="fs_xl" href="{:U('User/distribut_qr')}">分享给好友，还有更多惊喜！></a>
						<a href="{:U('User/wallet')}"><p class="fs_xs">查看钱包</p></a>
					</div>
				</div>
			</div>
		</div>
		<script src="__STATIC__/js/cellar/mui.min.js"></script>
		<script type="text/javascript" src="__STATIC__/js/cellar/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			mui.init();
			$(function() {
				$(".chai").click(function() {
					var is_val={$is_val};
					if(is_val==0){
						alert("亲，要先绑定手机号码才能领取红包哦！");
						location.href="{:U('User/mobile_validate')}";
					}else{
						$(this).addClass("cheac");					
						setTimeout('aa()', 1000);
					}
				});
			})

			function aa() {
				var num = 10 * Math.random(); //玩玩，生成随机数
				var num1 = num.toFixed(2); //小数点后两位
			    $.post("{:U('Mobile/User/red_packet')}",'',function(data){
                	if(data.status == 1){
                		$(".chai").hide();
                		$(".zhong").hide();
						$(".zhongjiang").show();
						$(".zhongjiang").find("em").text(data.money); //输出随机金额
                	}
                	else{
                		alert(data.msg);
                	}
                },'json');
			}

			function autoScroll(obj) {
				var liH=$(obj).find("li").height;
				$(obj).find("ul").animate({
					marginTop: "-25px"
				}, 500, function() {
					$(this).css({
						marginTop: "0px"
					}).find("li:first").appendTo(this);
				})
			}
			$(function() {
				setInterval('autoScroll(".zj_m")',800);

			})
		</script>
	</body>

</html>